<template>
  <div v-loading="loading">
    <rightArea right-title="常用功能" :is-left-title="true" :areaHeight="height" @click="handClickFun">
      <template slot="content">
        <div :style="cWrapperHeight">
          <el-scrollbar style="height:100%" v-if="commmonData.length>0">
            <Item :data="commmonData" />
          </el-scrollbar>
        </div>
      </template>
    </rightArea>
    <portalDialog
      :dialogVisible.sync="dialogVisible"
      title="编辑"
      @defineFun="defineFun"
      @editCilck="editCilckFun"
      @comfireFun="comfireFun"
      :destroyOnClose="true"
    >
      <template slot="content">
        <editIcon ref="editIcon" v-if="list && list.length>0" :list="list"></editIcon>
      </template>
    </portalDialog>
  </div>
</template>

<script>
import rightArea from "@/views/index/Index/common/rightArea";
import Item from "@/views/index/Index/common/Item";
import editIcon from "@/views/editIcon";
import portalDialog from "@/components/portalDialog";
import { axiosGetUserCommonMenuList, axiosGetUserCommonMenuAllList, axiosGetUserCommonMenu } from "@/api/home/index";
export default {
  props: {
    height: {
      type: [String, Number],
      default: 324
    },
    column: {
      type: Number,
      default: 8
    }
  },
  components: {
    rightArea,
    Item,
    editIcon,
    portalDialog
  },
  computed: {
    cWrapperHeight () {
      return {
        height: this.height - 40 + "px"
      };
    }
  },
  data () {
    return {
      commmonData: [],
      allData: [],
      dialogVisible: false,
      list: [
        {
          data: [],
          iconStyleCls: {
            iconName: "icon-cuowu",
            style: {
              color: "#ff0000"
            }
          },
          title: "我的应用",
          subTitle: "(你可以把常用的应用添加到主页)",
          type: "my"
        },
        {
          data: [],
          iconStyleCls: {
            iconName: "icon-tianjia",
            style: {
              color: "#0088d7"
            }
          },
          title: "所有应用",
          type: "all"
        }
      ],
      loading: true
    };
  },
  created () {
    this.getUserCommDataFun();
    this.getCommonData();
  },
  methods: {
    handClickFun (txt) {
      this.dialogVisible = true;
    },
    // 获取常用数据
    getCommonData () {
      axiosGetUserCommonMenuAllList().then(res => {
        let data = res.data.data;
        //  this.list[0].data = JSON.parse(JSON.stringify(this.commmonData));
        //  this.list[1].data = JSON.parse(JSON.stringify(this.allData));
        this.list[1].data = JSON.parse(JSON.stringify(data));
        this.allData = JSON.parse(JSON.stringify(data));
        this.loading = false;
      });
    },
    // 获取个人应用数据
    getUserCommDataFun () {
      axiosGetUserCommonMenuList().then(res => {
        let data = res.data.data;
        this.commmonData = data;
        this.list[0].data = JSON.parse(JSON.stringify(this.commmonData));
      });
    },
    defineFun () {
      // 确定
      let dataId = this.list[0].data.length > 0 ? this.list[0].data.map(v => v.menuId) : [];
      if (dataId.length > 0) {
        axiosGetUserCommonMenu(dataId).then(res => {
          this.commmonData = JSON.parse(JSON.stringify(this.list[0].data));
        });
      }
      this.dialogVisible = false;
      // reslove();
    },
    comfireFun () {
      // 取消
      this.list[0].data = JSON.parse(JSON.stringify(this.commmonData));
      this.dialogVisible = false;
      // this.list[1].data = JSON.parse(JSON.stringify(this.allData));
    },
    editCilckFun () {
      this.isShowIcon = !this.isShowIcon;
      this.$refs.editIcon.setIsShowIcon(this.isShowIcon);
    }
  }
  // mounted () {
  //   this.list[0].data = JSON.parse(JSON.stringify(this.commmonData));
  //   this.list[1].data = JSON.parse(JSON.stringify(this.allData));
  // }
};
</script>

<style lang="less" scoped>
/deep/ .el-scrollbar__wrap {
  overflow-x: hidden !important;
}
</style>